<template>
  <van-uploader v-model="fileList"
                multiple
                :after-read="afterRead"
                :max-count="1"
                class="sc" />
</template>

<script>
import { ref } from 'vue'
import { Uploader } from 'vant'
import axios from 'axios'
export default {
  components: {
    vanUploader: Uploader
  },
  setup () {
    const afterRead = (file) => {
      // 此时可以自行将文件上传至服务器
      console.log(file)
      const formData = new FormData()  // 声明一个FormData对象
      formData.append('file', file.file)
      axios.post(
        '/api/a/a',
        formData,
        {
          headers: {
            'content-type': 'multipart/form-data'
          }
        }
      )
        .then(res => {
          console.log(res)
        })
    }
    const fileList = ref([
      { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
      // Uploader 根据文件后缀来判断是否为图片文件
      // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      { url: 'https://cloud-image', isImage: true },
    ])
    return {
      afterRead,
      fileList
    }
  }
}
</script>

<style>
</style>